<template>
	<view class="index f16 c0">
		<vipInfo :payVip="payVip" @handvipUser="vipUser = true" @vip="vip" />
		<view class="bf bs6 p10 f14 m10">
			<view class="dfbc p-10-0">
				<text>联系人</text>
				<view class="tar">
					<u--input v-model="form.contacts" disabledColor="#ffffff" placeholder="请输入联系人" border="none">
					</u--input>
				</view>
			</view>
			<view class="dfbc p-10-0">
				<text>手机号</text>
				<view class="dfa ">
					<u--input v-model="form.mobile" disabledColor="#ffffff" placeholder="请输入手机号" border="none">
					</u--input>
				</view>
			</view>
			<view class="dfbc p-10-0">
				<text>酒水品牌</text>
				<view class="dfa" @click="showArea=true">
					<u--input v-model="areaName" border="none" :disabled="true" disabledColor="#fff" placeholder="请选择"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="dfbc p-10-0">
				<text>数量</text>
				<view class="dfa ">
					<u--input v-model="form.num" disabledColor="#ffffff" placeholder="请输入数量" border="none">
					</u--input>
				</view>
			</view>
			<!-- <view class="dfbc p-10-0">
				<text>单位</text>
				<view class="dfa ">
					<u--input v-model="form.start" disabledColor="#ffffff" placeholder="请输入单位" border="none">
					</u--input>
				</view>
			</view> -->
			<view class="dfbc p-10-0">
				<text>备注</text>
				<view class="dfa ">
					<u--input v-model="form.notes" disabledColor="#ffffff" placeholder="请输入备注信息" border="none">
					</u--input>
				</view>
			</view>
		</view>
		<u-action-sheet :show="showArea" :actions="areaList" @close="showArea = false" @select="selectArea">
		</u-action-sheet>
		<u-action-sheet :show="showType" :actions="typeList" @close="showType = false" @select="selectType">
		</u-action-sheet>
		<view class="buts bf5">
			<view class="p-0-20 mb10">
				<view class="cf bs30 tac p10 f14 wei" :style="{background:subColor,color:'#000'}" @click="save">确认存酒</view>
			</view>
			<view class="c8 tac pb15 f14" @click="cancel">取消</view>
		</view>
		<u-modal :show="vipUser" :negativeTop="200" title="会员查询" confirmText="查询" showCancelButton
			confirmColor="#FD8906" cancelColor="#000" @confirm="search" @cancel="vipUser = false"
			@close="vipUser = false" zoom>
			<view class="slot-content">
				<u--input v-model="phone" type="number" placeholderClass="inni" placeholderStyle="color:#c1c1c1"
					placeholder="请输入手机号" border="none"
					:customStyle="{'width':'100%','flex':1,'background': '#f6f6f6','padding': '10px 15px',}" clearable>
				</u--input>
			</view>
		</u-modal>
		<member ref="memberRef" @chooseMember="chooseMember" />
	</view>
</template>

<script>
	import {
		mapState,
	} from 'vuex'
	import vipInfo from '../../order/orders/components/vipInfo.vue';
	import member from '@/components/user/member.vue';
	export default {
		components: {
			vipInfo,
			member,
		},
		data() {
			return {
				payVip: {},
				vipUser:false,
				phone:'',
				form: {
					userId:'',
					drinksId:'',
					num:'',
					contacts:'',
					mobile:'',
					notes:'',
				},
				
				subColor: uni.getStorageSync('subject_color'),
				showArea: false,
				showType: false,
				areaList: [],
				typeList: [],
				areaName:'',
				typeName:'',
			}
		},
		onLoad(options) {
			this.getTableArea()
		},
		computed: {
			...mapState({
				storeId: state => state.storeId,
			}),
		},
		methods: {
			async search() {
				const reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
				if (this.phone) {
					this.vipUser = false
					uni.showLoading({
						title: 'loading...'
					})
					let {
						data
					} = await this.beg.request({
						url: this.api.cMember,
						data: {
							mobile: this.phone
						},
					})
					if (data && data.list.length) {
						uni.hideLoading()
						if (data.list.length > 1) {
							this.$refs['memberRef'].open(data.list)
						} else {
							this.payVip = data.list[0]
							this.form.userId = data.list[0].id
							this.form.mobile = data.list[0].mobile
							// this.form.contacts = data.list[0].realname
							this.phone = ''
						}
					} else {
						uni.hideLoading()
						uni.$u.toast('暂未查到用户信息');
					}
				} else {
					uni.$u.toast('请输入正确的手机号');
				}
			},
			chooseMember(e) {
				this.payVip = e
				this.form.userId = e.id
				this.form.mobile = e.mobile
				// this.form.contacts = e.realname
				this.phone = ''
			},
			vip() {
				this.payVip = {}
				this.form.userId = 0
			},
			
			async getTableArea() {
				const {
					data: {
						list
					}
				} = await this.beg.request({
					url: this.api.drinks,
					data: {
						pageSize: 999
					}
				})
				list.forEach((item) => {
				    item.name = item.name + `(单位:${item.unit})`;
				})
				this.areaList = list ? list : []
			},
			selectArea(e) {
				this.form.drinksId = e.id
				this.areaName = e.name
			},
			selectType(e) {
				this.form.typeId = e.id
				this.typeName = e.name
			},
			async save() {
				this.form.storeId = this.storeId
				if(!this.form.userId){
					return uni.$u.toast('请点击登录用户');
				}else if(!this.form.contacts){
					return uni.$u.toast('请输入联系人');
				}else if(!this.form.mobile){
					return uni.$u.toast('请输入手机号');
				}else if(!this.form.drinksId){
					return uni.$u.toast('请选择酒水品牌');
				}else if(!this.form.num){
					return uni.$u.toast('请输入数量');
				}
				const {
					msg,code
				} = await this.beg.request({
					url: this.api.dsOrder,
					method:'POST',
					data:this.form
				})
				if(code && code==200){
					uni.showToast({
					  title: msg
					}).then(()=>{
						setTimeout(() => {
						 uni.navigateTo({
						 	url: `/pages/order/wineStock/index`
						 })
						}, 600);
					})
				}else{
					uni.$u.toast(msg)
				}
			},
			cancel() {
				uni.navigateBack({
					delta: 1
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.dfbc /deep/.u-input__content__field-wrapper__field {
		text-align: right !important;
	}

	.buts {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
	}
	/deep/.u-action-sheet__item-wrap__item {
	    flex-direction: row !important;	
	}
	/deep/.u-action-sheet__item-wrap__item__subname {
	    margin-top: 0!important;
		margin-left: 5px;
	}
	
	.m10{
		margin: 20rpx;
	}
	.slot-content {
		width: 100%;
	}
</style>